<template>
  <view>
	<cover-view class="backBtn" @click.stop="navBack">
		<cover-image class='back-pre ex-back-pre' src='https://tbb-file.oss-cn-shenzhen.aliyuncs.com/user_uniapp/static/icons/return-icon.png' style="width: 14rpx;height: 20rpx;filter: brightness(0);" mode='aspectFill'></cover-image>
		<cover-view class="back-t" >返回</cover-view>
	</cover-view>
    <l-background color="#FFFFFF">
      <view class="flex-row">
        <image class="flex-item" mode="widthFix" src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/login_backgroud.png" />
      </view>
    </l-background>
    <view class="padding-top-212 padding-lr-56">
      <view>
        <text class="text-64 text-black text-bold">{{ name }}车企端</text>
      </view>
      <view class="margin-top-16">
        <text class="text-32 text-black">助力旅游客运车企数字化升级</text>
      </view>
      <view class="margin-top-64 flex-row align-center">
        <image v-if="back" class="back block margin-right-16" src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/back.svg" @click="jump('')" />
        <text class="text-36 text-bold text-black">{{ title }}</text>
      </view>
      <view v-if="text" class="margin-top-16">
        <text class="text-24 color-t3">{{ text }}{{ showPhone }}</text>
      </view>

      <slot />

      <view v-if="showRead" class="margin-top-82">
        <l-check-box v-model="isRead">
          <view slot="after" class="" @click="isRead=!isRead">
            <text class="text-24 color-t3">我已阅读并同意{{name}}的</text>
            <text class="text-24 color-blue" @click.stop="jump('/passport/agreement/index?type=1')">《用户服务协议》</text>
            <text class="text-24 color-t3">及</text>
            <text class="text-24 color-blue" @click.stop="jump('/passport/agreement/index?type=2')">《隐私政策》</text>
			<text class="text-24 color-blue" @click.stop="jump('/passport/agreement/index?type=3')">、《自律公约》</text>
			<text class="text-24 color-blue" @click.stop="jump('/passport/agreement/index?type=4')">、《运费统一结算平台管理办法》</text>
          </view>
        </l-check-box>
      </view>

      <view class="margin-top-30 margin-bottom-40">
		  <view class="wx-btn" v-if="showRead && !isRead" @click="noLogin">
			  {{ buttonText }}
		  </view>
        <tui-button v-else :disabled="disabled" :shadow="false" debounce :open-type="openType" @click="login" @getphonenumber="getPhoneNumber">{{ buttonText }}</tui-button>

        <!-- #ifdef MP-WEIXIN -->
        <navigator v-if="showQuit" class="close block flex-row flex-center color-t3 margin-top-30" target="miniProgram" hover-class="none" open-type="exit">退出</navigator>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/common/api/request'
import { mapGetters, mapMutations } from 'vuex'
import { name } from '@/common/config'
export default {
  name: 'LoginBackground',
  props: {
    title: {
      type: [String, null],
      default: ''
    },
    buttonText: {
      type: [String, null],
      default: ''
    },
    back: {
      type: Boolean,
      default: true
    },
    showRead: {
      type: Boolean,
      default: true
    },
    showQuit: {
      type: Boolean,
      default: false
    },
    openType: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isRead: false,
      num: 0,
      timer: null,
      name
    }
  },
  computed: {
    showPhone() {
      const phone = this.userInfo ? this.userInfo.phone || '' : ''
      return phone ? phone.substring(0, 3) + '****' + phone.substring(7, 11) : phone
    },
    ...mapGetters({
      userInfo: 'userInfo',
      baseUrl: 'baseUrl'
    })
  },
  methods: {
	navBack() {
	  const pages = getCurrentPages();
	  if (pages.length >= 2) {
		uni.navigateBack({
			data: 1
		})
	  }else if (pages.length <= 1) {
		  uni.switchTab({
		  	url: '/pages/mine/mine',
		  })
	  }
			  
	},
	noLogin() {
	  this.toast(`请同意《${this.name}用户服务协议》与《${this.name}隐私政策》`)
	},
    login() {
      if (this.showRead && !this.isRead) {
        this.toast(`请同意《${this.name}用户服务协议》与《${this.name}隐私政策》`)
        return
      }
      this.$emit('submit')
    },
    getPhoneNumber(e) {
      if (e.errMsg.includes('fail user deny')) {
        this.toast('取消登录')
      }
      if (e.iv) {
        if (!this.isRead) {
          this.toast(`请同意《${this.name}用户服务协议》与《${this.name}隐私政策》`)
          return
        }
        if (e.errMsg.includes('ok')) {
          this.$emit('submit', e)
        }
      }
    },
    toggleApi() {
      if (this.num === 10) return
      const test = this.baseUrl ? this.baseUrl.includes('dev') : request.config.baseUrl.includes('dev')
      this.num++
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      this.timer = setTimeout(() => {
        this.num = 0
      }, 400)
      if (this.num === 10) {
        this.setBaseUrl(test ? 'https://api.tuanbaba.cn' : 'https://devapi.tuanbaba.cn')
        this.toast(`已切换至${test ? '正式' : '测试'}环境`)
      }
    },
    ...mapMutations({
      setBaseUrl: 'user/setBaseUrl'
    })
  }
}
</script>

<style scoped lang="scss">
@include setPadding(top,212);

@include setPadding(lr,56);

@include setMargin(top,64);

@include setMargin(top,82);

.back{
  width:48rpx;
  height:48rpx;
}

.close{
  height: 88rpx;
  background: $color-background;
  border-radius: 8rpx;
  font-size:34rpx;
}
.tui-primary-hover {
  background-image: $color-background-button-hover !important;
  color: $font-color-button !important;
}
.wx-btn {
	width: 100%;
	height: 95rpx;
	border-radius: 10rpx;
	font-size: 33rpx;
	text-align: center;
	line-height: 95rpx;
	background-image: $color-background-button !important;
	color: $font-color-button;
}
%back-base {
		color: rgba(0, 0, 0, .8);
	}
.backBtn {
	@extend %back-base;
	position: absolute;
	top: 100rpx;
	left: 6vw;
	display: flex;
	align-items: center;
	.back-t {
		margin-left: 2vw;
		font-size: 36rpx;
	}
}
</style>
